<template>
  <div>
    <el-table :data="tableDataFiltered" height="calc(100vh - 190px)" style="width: 100%"
      :size="showDateColumns ? 'small' : ''" @header-click="handleRowClick">
      <!-- @row-click="showRaw" -->
      <el-table-column label="姓名" prop="name" min-width="90px" align="center"></el-table-column>
      <el-table-column label="工牌号" prop="uid" min-width="120px" align="center"></el-table-column>
      <el-table-column label="小时数" prop="hours" min-width="90px" align="center"></el-table-column>
      <el-table-column label="远郊次数" prop="commutingDays" min-width="90px" align="center"></el-table-column>
      <el-table-column label="远郊明细" min-width="160px" align="center" v-if="showDateColumns">
        <template #default="scope">
          <div v-for="day in scope.row.commutingDates">
            <span>{{ day.date }}</span>
            <span style="padding: 0 12px"></span>
            <span>计{{ day.days }}天</span>
          </div>
          <div v-if="scope.row.commutingDays == 0">无</div>
        </template>
      </el-table-column>
      <el-table-column label="夜餐次数" prop="overnightDays" min-width="90px" align="center"></el-table-column>
      <el-table-column label="夜餐明细" min-width="160px" align="center" v-if="showDateColumns">
        <template #default="scope">
          <div v-for="day in scope.row.overnightDates">
            <span>{{ day.date }}</span>
            <span style="padding: 0 12px"></span>
            <span>计{{ day.days }}天</span>
            <span v-if="day.isDeepNight">*</span>
          </div>
          <div v-if="scope.row.overnightDays == 0">无</div>
        </template>
      </el-table-column>
      <el-table-column label="工作天数" prop="workingDays" min-width="90px" align="center"></el-table-column>
      <el-table-column label="工作明细" min-width="220px" align="center" v-if="showDateColumns">
        <template #default="scope">
          <div v-for="day in scope.row.workingDates">
            <span>{{ day.date }}</span>
            <span style="padding: 0 12px">{{ day.duration.toFixed(1) }}小时</span>
            <span>计{{ day.days }}天</span>
          </div>
          <div v-if="scope.row.workingDays == 0">无</div>
        </template>
      </el-table-column>
      <el-table-column label="加班天数" min-width="90px" align="center">
        <template #default="scope">
          <div v-if="scope.row.overtimeDays == 0">
            {{ scope.row.overtimeDays }}
          </div>
          <div v-else style="color: var(--el-color-warning)">
            {{ scope.row.overtimeDays }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="加班明细" min-width="220px" align="center" v-if="showDateColumns">
        <template #default="scope">
          <div v-for="day in scope.row.overtimeDates" style="color: var(--el-color-warning)">
            <span>{{ day.date }}</span>
            <span style="padding: 0 12px">{{ day.duration.toFixed(1) }}小时</span>
            <span>计{{ day.days }}天</span>
          </div>
          <div v-if="scope.row.overtimeDays == 0">无</div>
        </template>
      </el-table-column>
      <el-table-column label="数据" min-width="60px" align="center">
        <template #default="scope">
          <div>
            <el-button type="info" link size="small" @click="handleShowData(scope.row)">
              <el-icon>
                <Search />
              </el-icon>
              <span>明细</span>
            </el-button>
          </div>
          <div>
            <el-button type="info" link size="small" @click="handleShowRaw(scope.row.uid)">
              <el-icon>
                <Search />
              </el-icon>
              <span>打卡</span>
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer-bar" v-if="tableData.length > 0">
      <!-- <el-tooltip
        effect="dark"
        content="可过滤任何字段，多个关键字使用空格分隔"
        placement="top"
      >
      </el-tooltip> -->
      <el-input v-model="filterString" style="width: 180px" placeholder="过滤 (姓名 / 工牌号)" clearable size="small" />
      <el-divider direction="vertical" />
      <el-checkbox v-model="showDateColumns" size="small">
        <span>显示明细列</span>
      </el-checkbox>
      <el-divider direction="vertical" />
      <el-button type="success" link size="small" @click="handleExport">
        <el-icon>
          <Download />
        </el-icon>
        <span>导出Excel</span>
      </el-button>
      <el-divider direction="vertical" />
      <el-button size="small" link type="info">
        <el-icon>
          <InfoFilled />
        </el-icon>
        <span>共计</span>
        <b>{{ tableData.length }}</b>
        <span>人</span>
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, h } from "vue";
import { ElMessageBox, ElNotification } from "element-plus";

const props = defineProps({
  data: {
    type: Array,
    required: true,
  },
});

const tableData = computed(() =>
  props.data ? props.data.filter((cell) => cell.hours > 0 || cell.declared) : []
);

const tableDataFiltered = computed(() => handleFilter(tableData.value));

const showDateColumns = ref(true);
const handleRowClick = () => {
  // showDateColumns.value = !showDateColumns.value;
};

const emits = defineEmits(["export", "showRaw", "showData"]);
const handleExport = () => {
  emits("export");
};

const handleShowData = (row) => {
  emits("showData", row);
};

const handleShowRaw = (uid) => {
  emits("showRaw", uid);
};

const filterString = ref("");
const handleFilter = (array, string = filterString.value) => {
  if (string && string.length && string != "") {
    array = array.filter(
      (cell) => cell.name.includes(string) || (cell.uid + " ").includes(string)
    );
  }
  return array;
};
</script>

<style scoped>
.footer-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 32px;
}

.footer-bar>* {
  margin: 0 12px;
}
</style>
